<template>
  <div class="lg-steps">
      <div class="lg-steps-line"></div>
      <div class="lg-step" 
        v-for="index in count" :key="index"
        :style="{ color: active >= index ? activeColor : defaultColor}">
          {{ index }}
      </div>
  </div>
</template>

<script>
import './steps.css'
export default {
  name: 'LgSteps',
  props: {
    count: { 
        type: Number,
        default: 3
    },
    active: {
        type: Number,
        default: 0
    },
    activeColor: { // 完成之后的高亮显示的颜色
        type: String,
        default: 'red'
    },
    defaultColor: { // 默认显示字体的颜色
        type: String,
        default: 'green'
    }
  }
}
</script>
<style>
</style>
